"use client";
import { Button, Card, Col, Form, Input, Radio, Row, message } from "antd";
import { memo, useState } from "react";
import "./index.css";

const { TextArea } = Input;

interface UserInfoProps {
    user: {
        userName: string;
        userProfile: string;
    };
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

interface UserInfoData {
    nickName?: string;
    phone?: string;
    email?: string;
    sex?: string | number;
    introduce?: string;
}

const Sex: Record<string, any> = {
    1: "男",
    2: "女",
};

// 手机号验证规则
const phoneRules = [
    { required: true, message: "请输入手机号码" },
    {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
    },
];

// 邮箱验证规则
const emailRules = [
    { required: true, message: "请输入邮箱" },
    {
        type: "email",
        message: "请输入正确的邮箱格式",
    },
];

const normFile = (e: any) => {
    if (Array.isArray(e)) {
        return e;
    }
    return e?.fileList;
};

const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
    const [form] = Form.useForm();
    const [editFlag, setEditFlag] = useState(false);
    const [loading, setLoading] = useState(false);
    const [userInfo, setUserInfo] = useState<UserInfoData>({
        nickName: user.userName,
        introduce: user.userProfile,
    });

    const onFinish = () => {
        form.validateFields()
            .then((values) => {
                setLoading(true);
                const params = {
                    ...values,
                };
                // 临时模拟更新成功
                setTimeout(() => {
                    setUserInfo(params);
                    setLoading(false);
                    setEditFlag(false);
                    message.success("更新成功");
                }, 500);
            })
            .catch((errorInfo) => {
                console.log("验证失败:", errorInfo);
            });
    };

    return (
        <div className="user-info-box">
            <Card title="详细信息" size="small">
                <Form
                    {...layout}
                    colon={false}
                    form={form}
                    initialValues={userInfo}
                >
                    <Row>
                        {/* 性别 */}
                        <Col span={24}>
                            {editFlag ? (
                                <Form.Item label="性别" name="sex">
                                    <Radio.Group>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            ) : (
                                <Form.Item label="性别">
                                    <>
                                        {userInfo.sex
                                            ? Sex[userInfo.sex]
                                            : "未知"}
                                    </>
                                </Form.Item>
                            )}
                        </Col>
                        {/* 手机号码 */}
                        <Col span={24}>
                            {editFlag ? (
                                <Form.Item
                                    label="手机号码"
                                    name="phone"
                                    rules={phoneRules}
                                >
                                    <Input placeholder="请输入手机号码" />
                                </Form.Item>
                            ) : (
                                <Form.Item label="手机号码">
                                    <>{userInfo.phone || "未知"}</>
                                </Form.Item>
                            )}
                        </Col>
                        {/* 邮箱 */}
                        <Col span={24}>
                            {editFlag ? (
                                <Form.Item
                                    label="邮箱"
                                    name="email"
                                    rules={emailRules}
                                >
                                    <Input placeholder="请输入邮箱" />
                                </Form.Item>
                            ) : (
                                <Form.Item label="邮箱">
                                    <>{userInfo.email || "未知"}</>
                                </Form.Item>
                            )}
                        </Col>

                        <Col span={24}>
                            <Form.Item wrapperCol={{ offset: 6 }}>
                                {editFlag ? (
                                    <>
                                        <Button
                                            type="primary"
                                            size="small"
                                            style={{ marginRight: "10px" }}
                                            onClick={onFinish}
                                            loading={loading}
                                        >
                                            保存
                                        </Button>
                                        <Button
                                            size="small"
                                            onClick={() => {
                                                setEditFlag(false);
                                                form.resetFields(); // 取消时重置表单
                                            }}
                                        >
                                            取消
                                        </Button>
                                    </>
                                ) : (
                                    <Button
                                        type="primary"
                                        size="small"
                                        onClick={() => setEditFlag(true)}
                                    >
                                        编辑
                                    </Button>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </div>
    );
};

export default memo(UserInfo);
